<template>
    <div>
        <el-row>
            <el-col :span="8" style=" height:100px; background-color: white;">
                <el-col :span="3" style="width:50%; margin-top: 20px;">
                    <div style="font-family: Helvetica Neue; font-size: 12px; color:darkgray ">短信余量</div>
                    <div style="font-family: Helvetica Neue; font-size: 20px; margin-top: 10px;">1265条</div>
                </el-col>

                <el-col :span="3" style="width: 50%; margin-top: 20px;">
                    <div style="font-family: Helvetica Neue; font-size: 12px; color:darkgray ">短信总量</div>
                    <div style="font-family: Helvetica Neue; font-size: 20px; margin-top: 10px;">20000条</div>
                </el-col>
            </el-col>
            <el-col :span="15" style="height:100px; float:right; background-color: white;">
                <el-col :span="3" style="width:30%; margin-top: 20px;">
                    <div style="font-family: Helvetica Neue; font-size: 12px; color:darkgray ">今日短信推送</div>
                    <div style="font-family: Helvetica Neue; font-size: 20px; margin-top: 10px;">1265条</div>
                </el-col>

                <el-col :span="3" style="width: 30%; margin-top: 20px;">
                    <div style="font-family: Helvetica Neue; font-size: 12px; color:darkgray ">今日邮件推送</div>
                    <div style="font-family: Helvetica Neue; font-size: 20px; margin-top: 10px;">1265条</div>
                </el-col>

                <el-col :span="9">
                    <div style="margin-top: 5px;">
                        <el-button type="danger" @click="openCharge">短信充值</el-button>
                        <el-button type="success" @click="noteWarning">短信预警</el-button>
                    </div>
                    <div style="margin-top: 5px;">
                        <el-button type="warning" @click="chargeRecord">充值记录</el-button>
                        <el-button type="primary" @click="pushNotice">推送类型</el-button>
                    </div>
                </el-col>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row style="background-color: white;">
            <el-tabs v-model="activeName" style="padding-right: 50px; margin-top: 10px;">
                <el-tab-pane label="学员推送记录" name="first" style="height:80dvh ;">
                    <StudentPush></StudentPush>
                </el-tab-pane>
                <el-tab-pane label="老师推送记录" name="second">
                    <TeacherPush></TeacherPush>
                </el-tab-pane>
                <el-tab-pane label="校长推送记录" name="third">
                    <HeadmasterPush></HeadmasterPush>
                </el-tab-pane>
            </el-tabs>



        </el-row>
    </div>
</template>
<script>

import { RouterLink } from 'vue-router';
import HeadmasterPush from './push/headmasterPush.vue';
import StudentPush from './push/studentPush.vue';
import TeacherPush from './push/teacherPush.vue';

export default {
    data() {
        return {
            activeName: 'first',
        };
    },
    mounted() {

    },
    methods: {
        change: function (val) {
            console.log(val);
            this.page = val;
        },
        openCharge() {
            const h = this.$createElement;
            // this.$confirm('当前可充值短信条数为18735条,是否进行短信充值(点击确认将进行页面跳转进行充值)', '短信充值', {
            this.$msgbox({
                title: '短信充值',
                message: h('p', null, [
                    h('span', null, '当前可充值短信条数为'),
                    h('i', { style: 'color:black' }, '18735条'),
                    h('span', null, ',是否进行短信充值(点击确认将进行页面跳转进行充值)'),
                ]),
                distinguishCancelAndClose: true,
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            })
                .then(() => {

                    window.location.href = 'https://www.aliyun.com/product/sms?spm=5176.28055625.J_4VYgf18xNlTAyFFbOuOQe.117.3868154achkvlH'

                })
                .catch(action => {
                    this.$message({
                        type: 'info',
                        message: action === 'cancel'
                            ? '取消成功'
                            : '取消成功'
                    })
                });
        },
        noteWarning() {
            const h = this.$createElement;
            // this.$confirm('当前剩余短信条数为1265条,已不足两次发送,点击确认可进行页面跳转充值', '短信预警', {
            this.$msgbox({
                title: '短信充值',
                message: h('p', null, [
                    h('span', null, '当前剩余短信条数为'),
                    h('i', { style: 'color:black' }, '1265条'),
                    h('span', null, ',已不足两次发送,点击确认可进行页面跳转充值'),
                ]),
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                window.location.href = 'https://www.aliyun.com/product/sms?spm=5176.28055625.J_4VYgf18xNlTAyFFbOuOQe.117.3868154achkvlH'
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消成功'
                });
            });
        },
        chargeRecord() {
            this.$alert('2023年9月14日19点20分15秒，充值200条,购买时长为12个月 2023年9月16日18点40分10秒，充值1500条,购买时长为6个月 2023年9月18日14点40分10秒，充值200条,购买时长为12个月', '充值记录', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: '执行成功'
                    });
                }
            });
        },
        pushNotice() {
            const h = this.$createElement;
            this.$msgbox({
                title: '推送类型',
                message: h('p', null, [
                    h('span', null, '当前默认推送类型为'),
                    h('i', { style: 'color:black' }, '邮件推送'),
                    h('span', null, ',如需选择短信推送，可进入类型设置页面，进行修改'),
                ]),
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                this.$router.push("/notice")
                
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消成功'
                });
            });
            
        }
    },
    components: { StudentPush, TeacherPush, HeadmasterPush }
}
</script>
<style scoped></style>